// 柱状图模块1
(function () {
    var myChart = echarts.init(document.querySelector(".bar .chart"));

    myChart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color: ["#2f89cf"],
        grid: {
            top: "10px",
            left: '0%',
            right: '0%',
            bottom: '4%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ["旅游行业", "教育培训", "电商行业", "IT行业", "金融行业"],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12",


                },
                axisLine: {
                    show: true, // 如果想要设置单独的线条样式 
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        // width: 1,
                        // type: "solid"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "直接访问",
                type: "bar",
                // 修改柱子宽度
                barWidth: "35%",
                data: [200, 900, 800, 800, 300],
                itemStyle: {
                    // 修改柱子圆角
                    barBorderRadius: 6
                }
            }
        ]
    });
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

// 柱形图2
(function () {
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    option = {
        grid: {
            top: "10%",
            left: '22%',
            bottom: '10%',
            // containLabel: true   //将这个变为false代表left是从图到左边的距离而不是刻度标签的距离
        },
        xAxis: {
            show: false   //不显示x轴的相关信息
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                data: ["html5", "css3", "javascript", "Vue.js", "Node.js"],
                axisLine: { show: false }, //不显示y轴线
                axisTick: { show: false }, // 不显示刻度
                axisLabel: {  //修改字体颜色
                    color: "#fff"
                },
            },
            { //第二组数据显示后面的数字
                show: true,
                inverse: true,
                data: [702, 350, 610, 793, 664],
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    }
                }
            }

        ],
        series: [
            {
                name: '条',
                type: 'bar',
                data: [90, 80, 75, 80, 60],
                // 修改柱子圆角
                itemStyle: {
                    barBorderRadius: 20,
                    // 更改颜色
                    color: function (params) {
                        return myColor[params.dataIndex]
                    }
                },
                barCategoryGap: 50,
                barWidth: 10,
                // 设置图像上文字标签 百分比显示
                label: {
                    show: true,
                    // 图形内显示
                    postion: "inside",
                    // 文字的显示格式  {c}会自动解析为我们data里的数据
                    formatter: "{c}%"
                },
                yAxisIndex: 0,   //就是z-index
            },
            {  //第二个柱子
                name: '框',
                type: 'bar',
                data: [100, 100, 100, 100, 100],
                itemStyle: {
                    color: "none", //不需要颜色
                    borderColor: "#00c1de", // 边框颜色
                    borderWidth: 3,   //边框宽度
                    barBorderRadius: 15
                },
                barCategoryGap: 50,
                barWidth: 15,
                yAxisIndex: 1,
            },

        ]
    };
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });

})();

// 柱状图模块1
(function () {
    var myChart = echarts.init(document.querySelector(".line .chart"));
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {

            textStyle: {
                color: '#4c9bfd' // 图例文字颜色
            },
            right: '10%' // 距离右边10%
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true, // 包含刻度文字在内
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            },

        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false  // 去除刻度
            },
            axisLabel: {
                color: '#4c9bfd' // 文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            }
        },
        color: ['#00f2f1', '#ed3f35'],
        series: [{
            name: '新增粉丝',
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            type: 'line',
            smooth: true
        }, {
            name: '新增游客',
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            type: 'line',
            smooth: true
        }
        ]
    };
    myChart.setOption(option)
})();

// 饼状图
(function () {
    var myChart = echarts.init(document.querySelector(".pie .chart"));
    
    option = {
        color: [
            "#6c5ce7",
            "#0984e3",
            "#0682ab",
            "#fd79a8",
            "#06a0ab",
          ],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            // 距离底部为0%
            bottom: "0%",
            // 小图标的宽度和高度
            itemWidth: 10,
            itemHeight: 10,
            data: ["20-25岁", "26-29岁", "30-39岁", "40-45岁", "45岁以上"],
            // 修改图例组件的文字为 12px
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [
            {
                name: '年龄分布',
                type: 'pie',
                radius: '50%',
                center: ["50%", "50%"],
                radius: ["40%", "60%"],
                // 不显示标签文字
                label: { show: false },
                // 不显示连接线
                labelLine: { show: false },
                data: [
                    { value: 4, name: "20-25岁" },
                    { value: 3, name: "26-29岁" },
                    { value: 2, name: "30-39岁" },
                    { value: 1, name: "40-45岁" },
                    { value: 0, name: "45岁以上" }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

            }
        ]
    };
    myChart.setOption(option)
})();
// 
(function () {
    var myChart = echarts.init(document.querySelector(".line1 .chart"));
    option = {
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        xAxis: {
            type: 'category',
            data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12
                }
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.2)"
                }
            },
        },
        yAxis: {
            type: 'value',
            axisTick: { show: false },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12
                }
            },
            // 修改分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        },
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },
        series: [
            {
                // series  第一个对象data数据
                data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40],
                type: 'line',
                smooth: true,
                //第一条 线是圆滑
                smooth: true,
                // 单独修改线的样式
                lineStyle: {
                    color: "#0184d5",
                    width: 2
                },
                // 填充区域
                areaStyle: {
                    // 渐变色，只需要复制即可
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: 8,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
            },
            {
                data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20],
                type: 'line',
                smooth: true,
                name: "转发量",
                type: "line",
                smooth: true,
                lineStyle: {
                    normal: {
                        color: "#00d887",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: 5,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
            },

        ]
    };
    myChart.setOption(option);
})();

// 
(function () {
    var myChart = echarts.init(document.querySelector(".pie1 .chart"));
        option = {
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            legend: {
                bottom:"0%",
                itemWidth:10,
                itemHeight:10,
                // 设置字体样式
                textStyle:{
                        color:"rgba(255,255,255,.5)",
                        fontSize:"12"
                }
            },

            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: ['10%', '70%'],
                    center: ['50%', '50%'],
                    roseType: "radius",
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8,

                    },
                    label: {
                        fontSize: 10,  //设置字体
                        color: "#fff"
                    },
                    labelLine: {
                        length: 6,
                        length2: 8,

                    },
                    data: [

                        { value: 20, name: '云南' },
                        { value: 26, name: '北京' },
                        { value: 24, name: '山东' },
                        { value: 25, name: '河北' },
                        { value: 20, name: '江苏' },
                    ]
                }
            ]
        };
    myChart.setOption(option)
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})()
